<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>


<div class="row" >
<!-- NEW WIDGET START -->
		<article class="col-sm-12 col-md-12 col-lg-12">
			<!-- Widget ID (each widget will need unique ID)-->
			<div class="jarviswidget well" id="wid-id-13" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-sortable="false">
				<!-- widget div-->
				<div>
					<!-- widget edit box -->
					<div class="jarviswidget-editbox">
						<!-- This area used as dropdown edit box -->
					</div>
					<!-- end widget edit box -->
					<!-- widget content -->
					<div class="widget-body">
						<ul id="myTab1" class="nav nav-tabs bordered">
							<li class="active">
								<a href="#s1" data-toggle="tab"><i class="fa fa-fw fa-lg fa-credit-card"></i> 基础信息 </a>
							</li>
							<s:if test="product.id!=null">
								<li>
									<a href="#s2" data-toggle="tab"><i class="fa fa-fw fa-lg fa-picture-o"></i> 产品图片 <span class="badge bg-color-blue txt-color-white"><s:property value="listRese.size()"/></span></a>
								</li>
								<li>
									<a href="#s3" data-toggle="tab"><i class="fa fa-fw fa-lg fa-adjust"></i> 图文说明 <span class="badge bg-color-blue txt-color-white"><s:property value="listNego.size()"/></span></a>
								</li>
							</s:if>
						</ul>

						<div id="myTabContent1" class="tab-content padding-10">
							<div class="tab-pane fade in active" id="s1">
									<form class="form-horizontal" action="" method="post">
										<input type="hidden" name="form_product_keyId" id="form_product_keyId" value="<s:property value="product.id" />">
										<fieldset>
											<div class="form-group">
												<label class="col-md-2 control-label" for="text-field">产品名称</label>
												<div class="col-md-10">
													<input class="form-control" name="form_product_name" id="form_product_name" placeholder="请输入产品名称"
														type="text" value="<s:property value="product.name" />">
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-2 control-label" for="text-field">价格</label>
												<div class="col-md-10">
													<input class="form-control" name="form_product_price" id="form_product_price" placeholder="请输入价格"
														type="text" value="<s:property value="product.price" />">
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-2 control-label" for="text-field">成本</label>
												<div class="col-md-10">
													<input class="form-control" name="form_product_cost" id="form_product_cost" placeholder="请输入成本"
														type="text" value="<s:property value="product.cost" />">
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-2 control-label" for="text-field">库存量</label>
												<div class="col-md-10">
													<input class="form-control" name="form_product_stock" id="form_product_stock" placeholder="请输入库存量"
														type="text" value="<s:property value="product.stock" />">
												</div>
											</div>
											<div class="form-group">
												<label class="col-md-2 control-label" for="text-field">产品经理</label>
												<div class="col-md-10">	
													<select class="" name="form_product_manager" id="form_product_manager">
														<optgroup label="支持拼音过滤">
															<option value="">请选择...</option>
															<s:iterator value="userslist" id="userslist">
																<option <s:if test="product.manager.id == #userslist.id"> selected </s:if> value="<s:property value="#userslist.id"/>"><s:property value="#userslist.name"/>（<s:property value="#userslist.pinYin"/>）</option>
															</s:iterator>
														</optgroup>
													</select>
												</div>
												
											</div>
											<div class="form-group">
												<label class="col-md-2 control-label" for="text-field">产品简介</label>
												<div class="col-md-10">
													<input class="form-control" name="form_product_about" id="form_product_about" placeholder="200个字以内"
														type="text" value="<s:property value="product.about" />">
												</div>
											</div>
										</fieldset>
									</form>
							</div>
							<div class="tab-pane fade" id="s2">
									<input type="hidden" name="form_product_keyId" id="form_product_keyId" value="<s:property value="product.id" />">
									<fieldset style="min-height:260px;">
										<h5><label style="width:100%" for="h-input"> <span class="label  label-warning"> 提示：图片请上传200px*200px的大小，请使用PNG/JPG格式，最多5张图片！</span> </label></h5>
										<ul class="clearfix" id="J_UploaderQueue">
											<!--默认文件数据，组件会将数据插入到file的result对象内，通过监听success事件可以获取到-->
											<script type="text/uploader-files"><s:property escape='0' value="product.fileUrlsJson" /></script>
											<li>
										        <div id="J_UploadBg" class="unupload-area">
										            <span class="count"> 还可以上传<em id="J_UploadCount">5</em>图片！ </span>
										            <input class="g-u" id="J_UploaderBtn" name="productPhoto" type="file" value="上传图片"  accept="image/*">
										            <s class="bg"></s>
										            <input type="hidden" name="imageUrls" id="J_Urls">
										        </div>
										    </li>
										</ul>
									</fieldset>
							</div>
							<div class="tab-pane fade" id="s3">
									<input type="hidden" name="form_product_keyId" id="form_product_keyId" value="<s:property value="product.id" />">
									<fieldset>
										<script type="text/plain" id="editor" style="width:660px;height:280px;"><s:property escape='0' value="product.destriptionHtml" /></script>
									</fieldset>
							</div>
						</div>
					</div>
					<!-- end widget content -->
				</div>
				<!-- end widget div -->
			</div>
			<!-- end widget -->
		</article>
</div>

<script type="text/javascript">
	// DO NOT REMOVE : GLOBAL FUNCTIONS!
	pageSetUp();
	////g.tbcdn.cn/??kissy/k/1.3.1/kissy-min.js
	/*
	 * SUMMERNOTE EDITOR
	 */
	var curFiles = [];
	loadScript("//g.tbcdn.cn/??kissy/k/1.3.1/kissy-min.js", iniKissy);		
	function iniKissy(){
		var S = KISSY;
	    if (S.Config.debug) {
	        var srcPath = "../../../../";
	        S.config({
	            packages:[
	                {
	                    name:"gallery",
	                    path:srcPath,
	                    charset:"utf-8"
	                }
	            ]
	        });
	    }

	    S.use('gallery/uploader/1.5/index,gallery/uploader/1.5/themes/loveUploader/index,gallery/uploader/1.5/themes/loveUploader/style.css', function (S, Uploader,LoveUploader) {
	        //上传组件插件
	        var plugins = 'gallery/uploader/1.5/plugins/auth/auth,' +
	                'gallery/uploader/1.5/plugins/urlsInput/urlsInput,' +
	                'gallery/uploader/1.5/plugins/proBars/proBars,' +
	                'gallery/uploader/1.5/plugins/filedrop/filedrop,' +
	                'gallery/uploader/1.5/plugins/preview/preview';

	        S.use(plugins,function(S,Auth,UrlsInput,ProBars,Filedrop,Preview){
	            var uploader = new Uploader('#J_UploaderBtn',{
	                //处理上传的服务器端脚本路径
	                action:"<%=basePath %>/com/ajax-product!photoUpload.action?keyId=<s:property value="product.id" />",
	                autoUpload:true
	            });
	            //使用主题
	            uploader.theme(new LoveUploader({
	                queueTarget:'#J_UploaderQueue'
	            }))
	            //验证插件
	            uploader.plug(new Auth({
	                        //最多上传个数
	                        max:5,
	                        //图片最大允许大小
	                        maxSize:500
	                    }))
	                //url保存插件
	                    .plug(new UrlsInput({target:'#J_Urls'}))
	                //进度条集合
	                    .plug(new ProBars())
	                //拖拽上传
	                    .plug(new Filedrop())
	                //图片预览
	                    .plug(new Preview());
	            
	            /*
	            var testFile = {'name':'test.jpg',
				    'size':2000,
				    'input':{},
				    'file':{'name':'test.jpg', 'type':'image/jpeg', 'size':2000}
				};
	            */
	            uploader.on('remove',function(ev){
	                var file = ev.file;
	                var target = file.target;
	                //alert(ev.index + file.name + file.size + file.id+ file.url)
	                //通过file.id找到返回的id，ajax删除掉！
	                var url = file.url;
	                var vUrl = url.split("?");
	                var vActionUrl = "file!remove.action?"+vUrl[1];
	                //alert(vActionUrl);
					$.ajax({
						url : vActionUrl,
						cache : false,
						dataType : "json",
						async : false,
						success : function(data) {
							 if (data.state == "200") {
								//前台显示出来
								$.smallBox({
									title : "提示：",
									content : "<i class='fa fa-clock-o'></i> <i>"
											+ data.message + "</i>",
									color : "#659265",
									iconSmall : "fa fa-thumbs-up bounce animated",
									timeout : 4000
								});
							} else {
								$.smallBox({
									title : "操作失败",
									content : "<i class='fa fa-clock-o'></i> <i>"
											+ data.message + "</i>",
									color : "#C46A69",
									iconSmall : "fa fa-times fa-2x fadeInRight animated",
									timeout : 6000
								});
							} 
						}
					});
					
	            }); 
	            //添加队列的后台的id,keyId根据Url来拆
	            uploader.on('success',function(ev){
	            	var index = ev.index, file = ev.file;
	                //服务器端返回的结果集
	                var result = ev.result;
	                //alert('上传成功,服务器端返回url：' + result.url + " file.id "+ file.id+ " file.gridid "+ file.gridId);
	                file.url = result.url;
	                
	                var queue = uploader.get('queue');
					var files = queue.get('files');
					//alert(files.length);
					
	                /* var testFile = {'name':'test.jpg',
	                	    'size':2000,
	                	    'input':{},
	                	    'file':{'name':'test.jpg', 'type':'image/jpeg', 'size':2000}
	                	};
                	//向队列添加文件
                	var file = queue.add(testFile);
                	alert('添加的文件数据为：'+file); */
	                
	            }); 
	            uploader.on('error', function (ev) {
	                var index = ev.index, file = ev.file;
	                //服务器端返回的结果集
	                var result = ev.result;
	                //alert( '上传失败,错误消息为：' +result.msg);
	            });
	            
	          	//渲染默认数据
	            uploader.restore();
	        });
	    })
	}
	iniUmeditor();
	function iniUmeditor(){
		if(umIndex == 1){
			UM.getEditor("editor").destroy();//销毁实例
		}
		umIndex = 1;	//是否已经打开过
		//$(".editor").remove();//再把编辑层删除
		var serverPath = '<%=basePath %>/com/',
        ue = UM.getEditor('editor', {
            imageUrl:serverPath + "ajax-product!infoUpload.action",
            imagePath:serverPath,
            lang:/^zh/.test(navigator.language || navigator.browserLanguage || navigator.userLanguage) ? 'zh-cn' : 'en',
            langPath:UMEDITOR_CONFIG.UMEDITOR_HOME_URL + "lang/",
            focus: true
        });

		//ue.setContent('请输入产品图文介绍', false);
	}
	
    function insertHtml() {
        var value = prompt('插入html代码', '');
        ue.execCommand('insertHtml', value)
    }
    function getAllHtml() {
        alert(UM.getEditor('editor').getAllHtml())
    }
    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(UM.getEditor('editor').getContent());
        alert(arr.join("\n"));
    }
    function isFocus(){
        alert(ue.isFocus())
    }
    function doBlur(){
        ue.blur()
    }
    function getPlainTxt() {
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
        arr.push("内容为：");
        arr.push(UM.getEditor('editor').getPlainTxt());
        alert(arr.join('\n'))
    }
    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用umeditor', true)方法可以设置编辑器的内容");
        UM.getEditor('editor').setContent('欢迎使用umeditor', isAppendTo);
        alert(arr.join("\n"));
    }
    function setDisabled() {
        UM.getEditor('editor').setDisabled('fullscreen');
        disableBtn("enable");
    }

    function setEnabled() {
        UM.getEditor('editor').setEnabled();
        enableBtn();
    }

    function getText() {
        //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
        var range = UM.getEditor('editor').selection.getRange();
        range.select();
        var txt = UM.getEditor('editor').selection.getText();
        alert(txt)
    }

    function getContentTxt() {
        var arr = [];
        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
        arr.push("编辑器的纯文本内容为：");
        arr.push(UM.getEditor('editor').getContentTxt());
        alert(arr.join("\n"));
    }
    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为：");
        arr.push(UM.getEditor('editor').hasContents());
        alert(arr.join("\n"));
    }
    function setFocus() {
        UM.getEditor('editor').focus();
    }
    function deleteEditor() {
        disableBtn();
        UM.getEditor('editor').destroy();
    }
    function disableBtn(str) {
        var div = document.getElementById('btnContainer');
        var btns = UM.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            if (btn.id == str) {
                UM.dom.domUtils.removeAttributes(btn, ["disabled"]);
            } else {
                $(btn).attr( "disabled", true ).addClass( "disabled" );
            }
        }
    }
    function enableBtn() {
        var div = document.getElementById('btnContainer');
        var btns = UM.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            $(btn).removeAttr( "disabled" ).removeClass( "disabled" );
        }
    }
</script>